<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>南流景</title>
    <link rel="stylesheet" href="{% static 'layui/css/layui.css' %}">
    <script src="{% static 'layui/layui.js' %}"></script>
</head>
<body>
<table class="layui-hide" id="typetable"></table>
<script type="text/html" id="toolbartypet">
    <button class="layui-btn layui-btn-lg" lay-event="addType">新增公告</button>
    <h4 style="float: right;color: red">主页默认显示id最大的一条</h4>
</script>
<script type="text/html" id="tooltypet">
    <div class="layui-clear-space">
        <a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
    </div>
</script>

<div id="addtype" style="display: none;">
<form class="layui-form layui-form-pane" action="{% url 'user:user_addside' %}" method="post" >
    {% csrf_token %}
    <div class="layui-form-item">
        <label class="layui-form-label">公告</label>
        <div class="layui-input-block">
            <textarea  name="message" autocomplete="off" value="" placeholder="输入新增公告"
                      class="layui-input"></textarea>
        </div>
    </div>
    <div class="layui-form-item" style="text-align: center">
        <button class="layui-btn" lay-submit lay-filter="demo2">新增</button>
    </div>
</form>
</div>
<div id="update" style="display: none;">
    <form class="layui-form layui-form-pane" method="post" action="{% url 'user:user_updateside' %}">
        {% csrf_token %}
        <input type="hidden" name="id" id="id" value=" " lay-verify="required">
        <div class="layui-form-item">
        <label class="layui-form-label">公告</label>
        <div class="layui-input-block">
            <textarea name="message" id="message" autocomplete="off" value="" placeholder="类型"
                   lay-verify="required"
                      class="layui-input"></textarea>
        </div></div>
          <div class="layui-form-item" style="text-align: center">
            <button class="layui-btn" lay-submit lay-filter="demo2">确认</button>
        </div>
    </form>
</div>
<script>
    layui.use(['table', 'jquery', 'layer'], function () {
        let layer = layui.layer;
        let table = layui.table;
        let $ = layui.jquery;
        // 已知数据渲染
        table.render({
            elem: '#typetable',
            toolbar: '#toolbartypet',
            url: '{% url 'user:user_allside' %}',
            method: "get",
            defaultToolbar: [],
            response: {
                statusCode: 200 //规定成功的状态码，默认：0
            },
            cols: [[ //标题栏
                {field: 'id', title: 'ID', sort: true},
                {field: 'message', title: '公告'},
                {fixed: 'right', title: '操作', toolbar: '#tooltypet'}
            ]],

        })
        ;
        // 工具栏事件
        table.on('toolbar(typetable)', function (obj) {
            switch (obj.event) {
                case 'addType':
                    layer.open({
                        type: 1,
                        area: ['360px', '500px'],
                        skin: 'layui-layer-rim', // 加上边框
                        content:  $('#addtype'),
                    });
            }
        });
         // 触发单元格工具事件
        table.on('tool(typetable)', function (obj) { // 双击 toolDouble
            var data = obj.data; // 获得当前行数据
            console.log(data)
            sideid = data.id
            message = data.message
            if (obj.event === 'edit') {
                layer.open({
                    title: '编辑 ID:' + id,
                    type: 1,
                    area: ['600px', '600px'],
                    content: $('#update'),
                    success: function (index, layero) {
                        $("#update").removeAttr("style", "");
                        $("#id").val(sideid);
                        $("#message").val(message);
                    }
                });
            }
        });
    });


</script>

</body>

</html>